<div style="margin: 10px auto">
  <ul class="clr-timeline clr-timeline-horizontal">
    <li class="clr-timeline-step disabled" *ngFor="let step of steps">
      <clr-icon shape="circle" *ngIf="step.status==='pending'"></clr-icon>
      <clr-spinner clrMedium aria-label="In progress" *ngIf="step.status === 'running'"></clr-spinner>
      <clr-icon shape="success-standard" *ngIf="step.status==='success'"></clr-icon>
      <clr-icon shape="error-standard" *ngIf="step.status === 'error'"></clr-icon>
      <div class="clr-timeline-step-body">
        <span class="clr-timeline-step-title" style="white-space: nowrap;">{{step.flow}}</span>
      </div>
    </li>
  </ul>
</div>

